<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>投票</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
    <link rel="stylesheet" href="css/voteIndex.css">
    <link rel="stylesheet" href="./css/vant.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <div class="imgbox">
                <img src="./img/voteTitle.png">
            </div>
            <template v-if="voteList.length!=0">
                <div class="formBox">
                    <div>
                        <span>*请勾选您要投票的选项</span>
                        <span @click="getData">
                            <van-icon name="replay" /></van-icon>
                            刷新</span>
                    </div>
                    <div v-for="(item,index) in voteList" :key="index" @click="voteHandle(index)">
                        <span>{{item.voteItem}}</span>
                        <van-checkbox v-model="item.isCheck" :disabled="isVote" icon-size="16px"></van-checkbox>
                    </div>
                </div>
                <div @click="toSubmit" class="subBtn" v-if="!isVote"></div>
            </template>

            <div class="empBox" v-else>
                投票活动暂未开启
            </div>

            <img src="./img/zbzLogo.png" class="aiimg">
            <div class="loading" v-show="isShow">
                <img src="img/load.gif">
            </div>
        </div>
    </div>
    <script src="js/vue.min.js"></script>
    <script src="js/flex_ible/lib-flexible.js"></script>
    <script src="js/url.js"></script>
    <script src="js/vant.min.js"></script>
    <script src="js/ajax.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        var activeId = sessionStorage.activeId
        // var activeId = 15
        console.log(activeId);

        var app = new Vue({
            el: '#app',
            data: {
                voteList: [],
                isShow: true,
                voteTimeIds: '',
                isVote: false
            },
            methods: {
                voteHandle(index) {
                    if (this.isVote) {
                        return
                    }
                    this.voteList.forEach((ele, eIndex) => {
                        ele.isCheck = eIndex == index
                    })
                },
                getData() {
                    var that = this
                    ajax({
                        url: "https://www.ccclkj.cn:2033/signature/listCurrentVote",
                        // url: "http://192.168.0.111:2033/signature/listCurrentVote",
                        type: 'post',
                        data: {
                            actId: activeId
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                that.isShow = false
                                res.data.forEach(element => {
                                    element.isCheck = false
                                });
                                that.voteTimeIds = res.data[0].timesId
                                if (that.voteTimeIds == localStorage.voteFlag) {
                                    that.isVote = true
                                    alert('您已完成投票')
                                } else {
                                    that.isVote = false
                                }
                                that.voteList = res.data
                            }
                        },
                    })
                },
                toSubmit: function () {
                    var that = this
                    if (this.isVote) {
                        alert('您已投票，请勿重复投票')
                        return
                    }
                    var voteIds = '', voteArr = this.voteList.filter(item => {
                        if (item.isCheck) {
                            voteIds += item.voteId + ','
                        }
                        return item.isCheck
                    })

                    if (voteArr.length == 0) {
                        alert('请勾选投票项')
                        return
                    }

                    console.log(voteArr);
                    console.log(voteIds);

                    this.isShow = true
                    ajax({
                        url: "https://www.ccclkj.cn:2033/signature/addVote",
                        // url: "http://192.168.0.111:2033/signature/addVote",
                        type: 'post',
                        data: {
                            serverId: 'v_' + activeId,
                            itemIds: voteIds,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            that.isShow = false
                            if (res.data == "success") {
                                localStorage.voteFlag = that.voteList[0].timesId
                                that.isVote = true
                                alert('投票成功')
                            } else if (res.data == "error") {
                                that.isShow = false
                                alert('投票通道已关闭或暂未开启')
                            }
                        },
                    })
                },
            },
            created: function () {
                this.getData()
            }
        })
    </script>
</body>

</html>